<template>
    <div class="menu-detail">
      <MenuInfo :info="info"></MenuInfo>
      <div class="content clearfix">
        <SongList class="song_info" :list="list" :showAlbum="true" :showSinger="true"></SongList>
        <div class="info">
            <div class="info-title">简介</div>
            <div class="info-content" v-html="info.diss_desc"></div>
        </div>
      </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import MenuInfo from '@/components/Info/MenuInfo/MenuInfo'
    import SongList from '@/components/SongList/SongList'
    export default {
        name: "MenuDetail",
        data(){
          return{
            info:{},
            list:[],
          }
        },
        mounted(){
          this.$store.dispatch('getMenuDetail',this.$route.params.id)
        },
        computed:{
          ...mapState(['menuDetail'])
        },
        watch:{
          menuDetail(value){
            this.info=value.info;
            this.list=value.song_list;
          }
        },
        components:{
          MenuInfo,
          SongList
        }
    }
</script>

<style scoped lang="less">
.menu-detail{
  background: linear-gradient(to bottom,#f2f2f2,#fafafa);
  .content{
    width: 1200px;
    margin: 30px auto 0;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    position: relative;
    .song_info{
      width: 860px;
    }
    .info{
      position: absolute;
      right: 0px;
      top:0px;
      width: 340px;
      .info-title{
        padding: 0px 0px 10px 40px;
        font-size: 20px;
      }
      .info-content{
        padding-left: 40px;
        font-size: 14px;
        line-height: 1.5;
        height: 200px;
        overflow-y: auto;
      }
    }
  }
}
</style>
